<template>
    <div class="fillcontain">
        <head-top></head-top>
        <div class="system_box" id="autoBox" :style="{'height':autoBox}">
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                <el-tab-pane :label="$t('message.basicInfor')" name="basic">
                    <basic></basic>
                </el-tab-pane>
                <el-tab-pane :label="$t('message.carteInfor')" name="carte">
                    <carte></carte>
                </el-tab-pane>
                <el-tab-pane :label="$t('message.roleInfor')" name="role">
                    <role></role>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
    import headTop from "../components/headTop";
    import basic from "../components/business/basic";
    import carte from "../components/business/carte";
    import role from "../components/business/role";
    import { baseUrl, baseImgPath } from "@/config/env";
    export default {
        components: {
            headTop,
            basic,
            carte,
            role
        },
        data() {
            return {
                baseUrl,
                baseImgPath,
                activeName: 'basic',
                autoBox: 0 + 'px'
            };
        },
        computed: {},
        created() {
            this.watchHeight();
        },
        mounted() {},
        methods: {
            watchHeight() {
                setTimeout(() => {
                    let widowHeight = window.innerHeight - 135;
                    this.autoBox = widowHeight + 'px';
                }, 1);
            },
            handleClick(tab, event) {
                console.log(tab, event);
            }
        }
    };
</script>
